<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>库存变动记录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<!--查询参数的表单-->
<form class="layui-form layui-form-pane layui-margin-3">

    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">操作方式</label>
            <div class="layui-input-block">
                <select name="type" id="type">
                    <option value=""></option>
                    <option value="1">药品入库</option>
                    <option value="2">药品出库</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">药品编号</label>
            <div class="layui-input-block">
                <input type="number" name="what" id="what" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">操作用户</label>
            <div class="layui-input-block">
                <input type="number" name="who" id="who" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="toDo">搜索记录</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--解析特殊值的含义-->
<script type="text/html" id="table-type">
    {{# if(d.type === 1) { }}
    <span class="layui-badge layui-bg-blue">入库</span>
    {{# } else if(d.type == 2) { }}
    <span class="layui-badge">出库</span>
    {{# } else { }}
    <span class="layui-badge layui-bg-cyan">未知</span>
    {{# } }}
</script>

<!--数据表格-->
<div class="layui-margin-3 layui-anim layui-anim-upbit">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<!--表格内容右端操作按钮-->
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs layui-btn-primary layui-bg-purple" lay-event="look">详情</a>
    </div>
</script>

<script src="/layui/layui.js"></script>
<script>

    layui.use(['table', 'form', 'layer'], function () {
        let table = layui.table;
        let form = layui.form;
        let layer = layui.layer;

        // 搜索按钮事件
        form.on('submit(toDo)', function (data) {
            let field = data.field; // 获取表单字段值
            table.reload('test', {  // 表格数据重载
                where: {
                    'type': field.type,
                    'what': field.what,
                    'who': field.who
                }
            });
            return false; // 阻止默认 form 跳转
        });

        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/getRecordData',
            page: true,
            limit: 15,
            limits: [15, 30, 50],
            cols: [
                [
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'parent', title: '批次编号', align: 'center', templet: '<div><span class="layui-badge layui-bg-gray">{{= d.parent }}</span></div>'},
                    {field: 'when', title: '记录时间', align: 'center'},
                    {field: 'what', title: '药品编号', align: 'center', templet: '<div><span class="layui-badge layui-bg-gray">{{= d.what }}</span></div>'},
                    {field: 'type', title: '操作类型', align: 'center', templet: '#table-type'},
                    {field: 'count', title: '药品数量', align: 'center'},
                    {field: 'price', title: '药品单价', align: 'center'},
                    {field: 'birthday', title: '生产日期', align: 'center'},
                    {field: 'who', title: '操作用户', align: 'center', templet: '<div><span class="layui-badge layui-bg-gray">{{= d.who }}</span></div>'},
                    {field: 'other', title: '备注信息'},
                    {fixed: 'right', title: '相关操作', width: 120, templet: '#toolDemo', align: 'center'}
                ]
            ],
            error: function (res, msg) {
                console.log(res, msg)
            }
        });

        // 触发单元格工具事件
        table.on('tool(test)', function (obj) {
            let data = obj.data; // 获得当前行数据

            if (obj.event === 'look') {
                layer.msg('当前ID : ' + data.id)
            }
        });
    });
</script>
</body>
</html>